<div class="col-lg-12">
  <div class="card col-xl-10 offset-xl-1">
    <div class="card-header border-bottom">
      <h4 class="card-title">站点广告</h4>
    </div>
    <div class="card-body" id="app">
      <div class="" v-for="ad in ads">
        <div class="form-group col-12 row">
          <label>广告文字</label>
          <input v-model="ad.title" class="form-control">
        </div>
        <div class="form-group col-sx-12">
          <label>广告链接</label>
          <input v-model="ad.link" class="form-control">
        </div>
        <div class="row">
          <div class="form-group col-6">
            <label>文字颜色</label>
            <input v-model.lazy="ad.color" :data-id="ad.id" data-type="color" data-method="update" class="form-control color-picker" :style="{backgroundColor: ad.color, color: '#fff'}">
          </div>
          <div class="form-group col-6">
            <label>边框颜色</label>
            <input v-model.lazy="ad.border_color" :data-id="ad.id" data-type="border" data-method="update" class="form-control color-picker" :style="{backgroundColor: ad.border_color, color: '#fff'}">
          </div>
        </div>
        <div class="row">
          <div class="form-group col-6">
            <label>文字大小</label>
            <input v-model="ad.size" class="form-control" type="number">
          </div>
          <div class="form-group col-6">
            <label>选择效果</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" v-model="ad.flicker" :id="'invalidCheck_' + ad.id">
                <label class="form-check-label" :for="'invalidCheck_' + ad.id">
                闪烁效果
                </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" v-model="ad.show_border" :id="'invalidCheck_border_' + ad.id">
                <label class="form-check-label" :for="'invalidCheck_border_' + ad.id">
                边框
                </label>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-common" @click="update(0)" :disabled="btn_lock">一键修改</button>
        @{{ad.errors}}@{{ad.message}}
        <hr />
      </div>
      <div class="" v-for="(ad, index) in add_ads">
        <div class="form-group col-12 row">
          <label>广告文字</label>
          <input v-model="ad.title" class="form-control">
        </div>
        <div class="form-group col-sx-12">
          <label>广告链接</label>
          <input v-model="ad.link" class="form-control">
        </div>
        <div class="row">
          <div class="form-group col-6">
            <label>文字颜色</label>
            <input v-model.lazy="ad.color" :data-id="index" data-type="color" data-method="create" class="form-control color-picker" :style="{backgroundColor: ad.color, color: '#fff'}">
          </div>
          <div class="form-group col-6">
            <label>边框颜色</label>
            <input v-model.lazy="ad.border_color" :data-id="index" data-type="border" data-method="create" class="form-control color-picker" :style="{backgroundColor: ad.border_color, color: '#fff'}">
          </div>
        </div>
        <div class="row">
          <div class="form-group col-6">
            <label>文字大小</label>
            <input v-model="ad.size" class="form-control" type="number">
          </div>
          <div class="form-group col-6">
            <label>选择效果</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" v-model="ad.flicker" :id="'invalidCheck_' + ad.id">
                <label class="form-check-label" :for="'invalidCheck_' + ad.id">
                闪烁效果
                </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" v-model="ad.show_border" :id="'invalidCheck_border_' + ad.id">
                <label class="form-check-label" :for="'invalidCheck_border_' + ad.id">
                边框
                </label>
            </div>
          </div>
        </div>
        @{{ad.errors}}@{{ad.message}}
        <hr />
      </div>
      <button type="submit" class="btn btn-common" @click="create(10)" :disabled="btn_lock">添加一组广告</button>
      <button type="submit" class="btn btn-common" @click="create(1)" :disabled="btn_lock">添加单个广告</button>
    </div>
  </div>
</div>
@section('script')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/assets/js/axios.min.js"></script>
<script src="/assets/js/sweetalert.min.js"></script>
<script>
  var ads = {!!json_encode($site->ads)!!};
</script>
<script>
  var url = '{{route('ads.update_all', $site->id)}}';
  var create_url = '{{ route('ads.create', $site->id) }}';
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Vue 初始化完毕',
      ads: [],
      add_ads: [],
      btn_lock: false
    },
    created: function() {
      // this.get_ads();
      this.ads = window.ads;
      console.log(this.ads);
    },
    updated: function() {
      $('.color-picker').colorpicker();
      $('.color-picker').on('change', function (event) {
          $(this).val(event.color.toString());
          var id = event.target.dataset.id;
          var type = event.target.dataset.type;
          var method = event.target.dataset.method;
          if(app) {
            if(method == 'create') {
              for(var i = 0; i< app.add_ads.length; i++){
                if (i == id) {
                  if (type == 'color') app.add_ads[i] .color = event.color.toString();
                  else app.add_ads[i] .border_color = event.color.toString();
                }
              }
            }

          }
      });
    },
    methods: {
      update: function(id) {
        var _this = this,data,message;
        _this.btn_lock = true; // 锁定按钮
        if(id > 0) {
          data = _this.add_ads;
          message = '添加成功';
          _this.ads.push(_this.add_ads);
          _this.add_ads = [];
        } else {
          data = _this.ads;
          message = '修改成功';
        }
        axios.post(url, data).then(function(res){
          _this.btn_lock = false;
          swal(message, {
              buttons: false,
              timer: 3000,
              icon: 'success'
            }).then(() => {
              if(res.status === 200) {
                if ( id > 0 ) {
                  _this.add_ads = res.data;
                  window.location.reload();
                } else _this.ads = res.data;
              }
            });

        })
        .catch(function(error) {
          _this.btn_lock = false;
          if (error.response && error.response.status === 403) {
            swal("您没有操作此项的权限！", {
              icon: "warning",
              buttons: false,
              timer: 3000,
            });
          } else if(error.response && error.response.status > 400) {
            swal("服务器异常，请稍候重试！", {
              icon: "warning",
              buttons: false,
              timer: 3000,
            });
          }
        });
      },
      create: function(num) {
         // 创建操作
         axios.post(create_url, {
           num
         }).then( ({data}) => {
          if(data.status === 200) {
            swal(data.message, {
              icon: "success",
              buttons: false,
              timer: 3000,
            }).then(() => {
              window.location.reload();
            });
          } else {
            swal(data.message, {
              icon: "warning",
              buttons: false,
              timer: 3000,
            });
          }
         });
      },
      save: function() {
        this.update(1);
      }
    }
  });
</script>
@stop
